<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="renderer" content="webkit" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>{:get_system_config('web','admin_title')}</title>
		<link rel="stylesheet" href="{__GOUGU__}/layui/css/layui.css?v={:get_system_config('web','version')}" media="all">
		<style type="text/css">
			html,body {width: 100%;height: 100%;background: #EAF3FF;}
			input:-webkit-autofill {
				-webkit-box-shadow: 0 0 0px 1000px white inset;
			}
			#container {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;
				background: url({__IMG__}/bg.png);
				background-size: cover;
			}
			#container .lock{width: 100%;height: 100%; position:absolute; top:0; left:0;
				background:#000 url({__IMG__}/lock_bg.svg);
				background-size: cover;
				opacity:0.72
			}
			.login {width: 360px;text-align: center;position: absolute;top: 50%;left: 50%;margin-top: -240px;margin-left: -180px;border-radius: 12px;box-shadow: 0 2px 6px rgba(92, 110, 136, .32);
			}
			.login .top {width: 360px;height: 117px;background-color: #fbbc05;border-radius: 12px 12px 0 0;line-height: 117px;text-align: center;overflow: hidden;
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);
			}
			.login .top .bg1 {display: inline-block;width: 72px;height: 72px;background: #fff;opacity: .1;border-radius: 0 72px 0 0;position: absolute;left: 0;top: 42px;}
			.login .top .bg2 {display: inline-block;width: 92px;height: 92px;background: #fff;opacity: .1;border-radius: 50%;position: absolute;right: -16px;top: -16px;}
			.login .bottom {background-color: #fff;padding:26px 24px;border-radius: 0 0 12px 12px;}
			
			.layui-input,.layui-textarea {height: 44px;border: 1px solid #ddd;}
			.captcha_img img{width:142px; height:44px; cursor:pointer;}
			.layui-btn {height: 45px;font-size: 16px;margin-top: 6px;background-color: #FF6347!important}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="lock"></div>
			<div class="login">
				<div class="top">
					<img src="{__IMG__}/login_logo.png" height="60" width="200">
					<span class="bg1"></span>
					<span class="bg2"></span>
				</div>
				<div class="bottom">
					<form class="layui-form" id="gougu-lock">
						<div class="layui-form-item" style="font-size:32px; color:#FF6347; padding:16px 0">
							当前是锁屏状态
						</div>
						<div class="layui-form-item">
							<input type="password" name="lock_password" lay-verify="required" value="" placeholder="请输入登录密码解锁" lay-reqText="请输入登录密码" autocomplete="off" class="layui-input">
						</div>						
						<button id="lock-submit" class="layui-btn layui-btn-fluid layui-bg-cyan" lay-submit lay-filter="lock-submit">解锁进入系统</button>
					</form>
				</div>
			</div>
		</div>
		<script src="{__GOUGU__}/layui/layui.js?v={:get_system_config('web','version')}"></script>
		<script type="text/javascript">
			layui.use(['form'], function() {
				var form = layui.form,
					$ = layui.$,
					layer = layui.layer;
				// 登录过期的时候，跳出ifram框架
				if (top.location != self.location) top.location = self.location;
				form.on('submit(lock-submit)', function(data) {
					$.ajax({
						url: "/home/login/lock",
						data: $('#gougu-lock').serialize(),
						type: 'post',
						async: false,
						success: function(res) {
							layer.tips(res.msg, '#lock-submit');
							if (res.code === 0) {
								setTimeout(function() {
									parent.document.location.href="/";
								}, 1200);
							}
							else if (res.code === 2) {
								setTimeout(function() {
									parent.document.location.href="/home/login/index.html";
								}, 1200);
							}
						}
					})
					return false;
				});
			});
		</script>
	</body>
</html>
